<template>
  <view class="box rtl">
    <!-- 顶部导航 -->
    <lg-topbar bgColor="#127B56" height="180rpx">
      <view style="width: 100%;">
        <view class="bg-topbar-content">
          <view @click="Back">
            <uv-icon name="arrow-left" size="25" color="#fff"></uv-icon>
          </view>
          <view>
            {{ t("Results") }}
            ({{ total }})
          </view>
          <view @click="goToCart">Cart</view>
        </view>
        <view style="margin-top: 20rpx; padding: 0 20rpx;">
          <!-- <uv-search /> -->
          <BgSearch @search="search_btn" :placeholder="t('Search')" :showAction="true" actionText="搜索" :animation="true"
            height="80rpx" />
        </view>
      </view>
    </lg-topbar>
    <view class="content" v-if="dataList">
      <view class="" v-if="dataList.length > 0">
        <view class="item" v-for="(item, i) in dataList" @click="getDetails(item.id, i)">
          <view class="num">
            #{{ i }}
          </view>
          <view class="item_box" :class="{ 'item_box_active': item.quantity > 0 }">
            <view class="item_text">
              <view class="info_num">
                <!-- 05546-02220-Linge -->
                {{ item.oe }}
              </view>
              <view class="notes">
                <!-- BRACKET ASSY-ENGINE MOUNTING.TUSSAN -->
                {{ item.productName }}
              </view>
              <view class="info_price">
                {{ item.productPrice }}SAR
              </view>
            </view>
            <view class="item_btn" v-if="item.quantity > 0">
              <!-- {{item.stock}} -->
              <text>{{ item.quantity }}</text>
            </view>
            <view class="item_add" v-else>
              <image src="/static/images/cart/add.png" mode="aspectFit"></image>
            </view>
          </view>
        </view>
      </view>
      <view class="nodata" v-else>
        <image class="img" src="/static/images/cart/noData.png" mode="widthFix"></image>
        <view class="">
          {{ t("No results found") }}
        </view>
      </view>
    </view>
    <view class="" v-if="cartList?.length > 0">
      <view class="footer footer_data" v-if="dataList.length" @click="goToCart">
        <view style="width: 100%; text-align: center;">
          Check cart（{{ cartList?.length }}）
        </view>
      </view>
    </view>
  </view>
  <goodsModelView ref="goodsModelRef" :title="title" :goods-detail="goodsDetail" @confirm="goodsConfrm" />
  <shopCartPlace ref="CartPlace" />
</template>

<script setup>
import shopCartPlace from "@/components/shopCartView/shopCartPlace.vue"
import BgSearch from "@/components/BgSearch/index.vue"
import goodsModelView from "@/components/GoodsModel/index.vue"
import { ref, onMounted } from "vue"
import { useI18n } from "vue-i18n";
import { HomeAPI, CartAPI } from "@/api/index";
import { useDeviceStore } from "@/store";
const deviceStore = useDeviceStore()
const { t } = useI18n()
const goodsModel = ref()
const goodsModelRef = ref()
const CartPlace = ref()

const Back = () => {
  uni.navigateBack()
}
const listForOe = ref([])
const dataList = ref(null)
const total = ref(0)
const goodsDetail = ref(null)
const goodsIndex = ref(-1)
const title = ref()
const search_text = ref("")
const cartList = ref([])
const search_btn = (text) => {
  if (text) {
    listForOe.value = [text];
  } else {

    listForOe.value = search_text.value ? search_text.value.split("\n") : [];
  }
  query()
}

const goodsConfrm = async (e) => {
  CartAPI.addCart({
    "shopId": deviceStore.MyShop.id,
    "carMakeId": e.goodsDetail.id,
    "oeList": [e.goodsDetail.oe],
    "quantity": e.num,
  }, "normal").then(res => {
    console.log(res)
    if (res.code == 200) {
      goodsModelRef.value.close()
      query()
    }
  })
}
const getDetails = async (id, index) => {
  goodsIndex.value = index;
  let res = await CartAPI.getDetails(id);
  console.log(goodsModel.value)
  goodsDetail.value = res.data
  title.value = res.data.oe
  goodsModelRef.value.open()
  // goodsModel.value.control(true)
  // goodsModelRef.value.open
  console.log(res)
}

const query = async () => {
  let myshop = deviceStore.MyShop;
  try {
    let res = await HomeAPI.getHomeSearch({
      "carMake": myshop.id,
      "listForOe": listForOe.value,
      "shopId": myshop.id
    })
    res?.data?.items?.forEach(item => {
      // console.log()
      item.quantity = 0
    })
    dataList.value = res?.data?.items;
    total.value = res?.data?.total;

    let cartRes = await CartAPI.getmyCartList("normal", deviceStore.MyShop.id,
      {
        shopId: deviceStore.MyShop.id,
        "listForOe": listForOe.value,
      })
    if (cartRes.code == 200 && cartRes.data) {
      const allKey = Object.keys(cartRes.data).find(key => key.toLowerCase().includes('all'));
      cartList.value = cartRes.data[allKey];
    }
    dataList.value.forEach(item => {
      cartList.value.forEach(cartItem => {
        if (item.oe == cartItem.oe) {
          item.quantity = cartItem.quantity
        }
      })
    })
  } catch (e) {
    console.log(e)
  }

}

onMounted(() => {
  let res = uni.getStorageSync("search")
  listForOe.value = res ? res.split("\n") : []
  query()
})
function goToCart() {
  uni.switchTab({
    url: "/pages/cart/index",
    // pages/cart/index
  });
}

</script>

<style lang="scss" scoped>
@import "@/static/css/index.scss";

.address-title {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 0;
  border-bottom: 1px solid #e9e9e9;
  margin-bottom: 20rpx;


  .icon_img {
    width: 40rpx;
  }
}

.remark {
  padding: 0rpx 0 20rpx;

  .remark-title {
    width: 90%;
    margin: 0 auto;
    padding: 10rpx 0;
    font-size: 28rpx;

  }

  .remark-text {
    border: 1px solid #cccccc;
    border-radius: 10rpx;
    width: 90%;
    margin: 0 auto;
    padding: 10rpx;
  }
}

.address_info {
  display: flex;

  .address_img {
    width: 200rpx;
    height: 200rpx;
    display: flex;
    align-items: center;

    .img {
      max-width: 100%;
      max-height: 100%;
    }
  }

  .address_info_detail {
    flex: 1;
    font-size: 24rpx;

    .postCode {
      padding: 5rpx 10rpx;
      border-radius: 5rpx;
      background: $primary-b;
      color: #fff;
      width: fit-content;
      margin-bottom: 20rpx;
    }

    .address_info_item {
      margin-bottom: 10rpx;
    }
  }
}

.goods-num {
  display: flex;
  align-items: center;
  // border: 1px solid #ccc;
  border-radius: 10rpx;
  width: 300rpx;
  text-align: center;
  margin: 20rpx auto;

  .input {
    border: 1px solid #ccc;
    border-left: none;
    border-right: none;
    width: 40%;
    height: 80rpx;
    line-height: 80rpx;

  }

  .goods-sum {
    border: 1px solid #ccc;
    width: 30%;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 0 10rpx 10rpx 0;
  }

  .goods-sum:nth-child(1) {
    border-radius: 10rpx 0 0 10rpx;
  }

}

.swiper {
  padding: 10rpx;

  image {
    width: 100%;
  }
}

.box {
  height: 100%;
  display: flex;
  flex-direction: column;

}

.bg-topbar-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  color: #fff;
  padding: 0 20rpx;
}

.head {
  background: #fff;
  border-radius: 0 0 20rpx 20rpx;

  .view_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border-radius: 0 0 20rpx 20rpx;
    padding: 20rpx 20rpx;
  }

  .head_select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 20rpx;

    .select_item {
      width: 45%;
      border: 1px solid #fff;
      border-radius: 10rpx;
      padding: 5rpx 10rpx;
      color: #fff;
      position: relative;

      .select_icon {
        position: absolute;
        right: 10rpx;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
}

.content {
  flex: 1;
  overflow-y: scroll;
  padding: 0 15rpx;

  .nodata {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding-top: 120rpx;

    .img {
      width: 200rpx;
      padding-bottom: 20rpx;
    }
  }

  .item {
    margin-bottom: 20rpx;

    .num {
      color: #7f7f7f;
      font-size: 24rpx;
      margin-left: 5rpx;
    }

    .item_box {
      display: flex;
      align-items: center;
      background: #fff;
      border-radius: 10rpx;
      padding: 20rpx;

      .item_text {
        flex: 1;

        .info_num {
          font-size: 32rpx;
          font-weight: bold;
        }

        .info_price {
          color: #E57854;
          font-size: 28rpx;
        }

        .notes {
          margin-top: 10rpx;
          font-size: 24rpx;
          color: #A9A9A9;
        }
      }

      .item_add {
        padding: 30rpx;

        image {
          width: 46rpx;
          height: 46rpx;
        }
      }

      .item_btn {
        width: 100rpx;
        background: $primary-b;
        height: 50rpx;
        border-radius: 10rpx;
        color: #fff;
        text-align: center;
        line-height: 50rpx;
      }
    }

    .item_box_active {
      background: #127B56;
      color: #fff;

      .item_btn {
        width: 100rpx;
        background: #fff;
        height: 50rpx;
        border-radius: 10rpx;
        color: $text-primary;
        text-align: center;
        line-height: 50rpx;
      }

      .item_text {
        flex: 1;

        .info_price {
          color: #fff;
        }

        .notes {
          color: #fff;
        }

      }
    }
  }
}

.footer {
  background: #fff;
  border-radius: 30rpx 30rpx 0 0;

  .title {
    text-align: center;
    padding: 20rpx 0;
  }

  .search_box {
    border: 1px solid #ccc;
    border-radius: 10rpx;
    margin: 20rpx;
    width: calc(100% - 40rpx);
    min-height: 500rpx;
    padding: 20rpx;
    box-sizing: border-box;

  }

  .footer_active {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx 40rpx;
    background: #127B56;
    color: #fff;
    border-radius: 10rpx 10rpx 0 0;
    font-size: 28rpx;

    .Confrm {
      display: flex;
      align-items: center;
    }

    .tip {
      font-size: 24rpx;
      color: #dddddd;
    }
  }

}

.footer_data {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 40rpx;
  background: #127B56;
  color: #fff;
  border-radius: 10rpx 10rpx 0 0;
  font-size: 28rpx;

  .Confrm {
    display: flex;
    align-items: center;
  }

  .tip {
    font-size: 24rpx;
    color: #dddddd;
  }
}

.p_name {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  margin: 10rpx;
  display: flex;

  .img {
    width: 30%;
  }

  .good-year {
    color: #a6a6a6;
  }
}
</style>